<template>
    <div class="page-content">
      <!-- banner -->
      <div class="banner">
        <div class="banner-center-box">
          <img class="banner-img" src="@/assets/index/banner-img.png" alt="">
          <div class="banner-left-box">
            <h2><span>加</span>入裸机云联盟</h2>
            <p>成为联盟经销商，代理销售全球数据中心</p>
            <p>赠送550美金现金，免费赠送业务管理系统，免费技术支持！</p>
            <span class="banner-btn">立即购买</span>
          </div>
          <div class="banner-right-box"></div>
        </div>
      </div>
      <!-- banner end-->

      <!-- datacenter -->
      <div class="content-items-box">
        <div class="box-title">
          <h2>连接数据中心与分销商</h2>
          <div class="e-title">Data center and distributors</div>
        </div>
        <div class="items-detail-box">
          <div class="item-box">
            <div class="icon-box">icon</div>
            <div class="item-tit">靠谱数据中心资源</div>
            <div class="item-detail">所有机房均为一手资源方，由联盟 为经销商精心甄选供应商</div>
            <a class="more-btn">了解更多</a>
          </div>

          <div class="item-box active">
            <div class="icon-box">icon</div>
            <div class="item-tit">一致的用户体验</div>
            <div class="item-detail">
              联盟为所有数据中心提供硬件、软件到
              网络的一站式解决方案，确保用户体验
            </div>
            <a class="more-btn">了解更多</a>
          </div>

          <div class="item-box">
            <div class="icon-box">icon</div>
            <div class="item-tit">联盟7*24小时不间断为双方服务</div>
            <div class="item-detail">
              联盟为数据中心提供7*24小时提供
              巡检服务，并且为经销商的需求免费
              提供软件开发支持
            </div>
            <a class="more-btn">了解更多</a>
          </div>

        </div>
      </div>
      <!-- datacenter end -->

      <!-- Global distribution -->
      <div class="content-items-box global-distribution">
        <div class="box-title">
          <h2>全球布局</h2>
          <div class="e-title">Global distribution</div>
        </div>
        <div class="items-detail-box">
          <div class="round-box big">
            <div class="round-box medium">
              <div class="round-box"></div>
            </div>

            <div class="roud-item-box">全球统一标准布局，同标准的硬件产品系列</div>
            <div class="roud-item-box roud-item2">Tier3或以上级别数据中心为客户保驾护航</div>
            <div class="roud-item-box roud-item3">覆盖主流区域，帮助经销商客户业务通达全球</div>
            <div class="roud-item-box roud-item4">全球更多数据中心正在被陆续接入</div>

            <div class="roud-small"></div>
            <div class="roud-small small2"></div>
            <div class="roud-small small3"></div>
            <div class="roud-small small4"></div>
          </div>

          <div class="area-round-box">亚太</div>
          <div class="area-round-box area2">北美</div>
          <div class="area-round-box area3">欧洲</div>
        </div>
      </div>
      <!-- Global distribution end -->

      <!-- product -->
      <div class="content-items-box my-product">
        <div class="product-center">
          <div class="box-title">
            <h2>我们的产品</h2>
            <div class="e-title">Our product</div>
          </div>
          <div class="items-detail-box">
            <div class="product-items">
              <div class="items-left">
                <img class="product-img" src="@/assets/index/product1.png" alt="">
              </div>
              <div class="items-right product-text">
                <div class="product-title">Hardware</div>
                <div class="s-title"><span>硬</span>件</div>
                <div class="porduct-detail">
                  BMSunion的所有硬件产品均来源于自有品牌MicroDragon, MicroDragon提供业界超高密度服务器、存储服务器及交换机 产品，
                  所有硬件提供API为平台软件系统服务。
                </div>
                <div class="more-btn">了解更多</div>
              </div>
            </div>

            <div class="product-items pad-top">
              <div class="items-left product-text">
                <div class="product-title">Software</div>
                <div class="s-title"><span>软</span>件</div>
                <div class="porduct-detail">
                  从最底层硬件资源管理为数据中心经营者提供极自动化运维， 到为数据中心代理商提供完整业务管理系统，无缝将数据中心
                  资源与代理商业务系统对接，让代理商业务开通、管理、财务完全实现自动化。
                </div>
                <div class="more-btn">了解更多</div>
              </div>
              <div class="items-right">
                <img class="product-img" src="@/assets/index/product2.png" alt="">
              </div>
            </div>

            <div class="product-items pad-top">
              <div class="items-left">
                <img class="product-img" src="@/assets/index/product3.png" alt="">
              </div>
              <div class="items-right product-text">
                <div class="product-title">Network</div>
                <div class="s-title"><span>网</span>络</div>
                <div class="porduct-detail">
                  为了确保裸机云产品的品质体验，MicroDraon自行研发了交换机产品线及NMS系统，为数据中心及终端客户提供可视化的
                  络数据监测
                </div>
                <div class="more-btn">了解更多</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- product end -->

      <!-- Industry support -->
      <div class="content-items-box industry-support">
        <div class="box-title">
          <h2>行业扶持</h2>
          <div class="e-title">Industry support</div>
        </div>
        <div class="items-detail-box">
          <div class="nav-content">
            <div class="nav-item">
              <div class="nav-item-detail">
                针对SP数据中心供应商提供资金及技术扶持，为降低数据中心现金流压力，对于采购我们
                的硬件为SP数据中心供应商提供最长3年36期的租赁业务，并允许我们的SP在第37个月以
                1美元的价格买断所有硬件的所有权；
                同时，我们为SP业务及数据中心硬件管理提供软件免费开发支持，提升SP的产品竞争力。
              </div>
              <div class="nav-item-name">
                <div class="icon-box">
                  icon
                </div>
                <div class="name-box">
                  <h3 class="item-title">针对SP数据中心</h3>
                  <div class="item-stitle">提供资金及技术支持</div>
                </div>
              </div>
            </div>
            <div class="nav-item active">
              <div class="nav-item-detail">
                针对SP数据中心供应商提供资金及技术扶持，为降低数据中心现金流压力，对于采购我们
                的硬件为SP数据中心供应商提供最长3年36期的租赁业务，并允许我们的SP在第37个月以
                1美元的价格买断所有硬件的所有权；
                同时，我们为SP业务及数据中心硬件管理提供软件免费开发支持，提升SP的产品竞争力。
              </div>
              <div class="nav-item-name">
                <div class="icon-box">
                  icon
                </div>
                <div class="name-box">
                  <h3 class="item-title">针对SP数据中心</h3>
                  <div class="item-stitle">提供资金及技术支持</div>
                </div>
              </div>
            </div>
            <div class="nav-item">
              <div class="nav-item-detail">
                针对SP数据中心供应商提供资金及技术扶持，为降低数据中心现金流压力，对于采购我们
                的硬件为SP数据中心供应商提供最长3年36期的租赁业务，并允许我们的SP在第37个月以
                1美元的价格买断所有硬件的所有权；
                同时，我们为SP业务及数据中心硬件管理提供软件免费开发支持，提升SP的产品竞争力。
              </div>
              <div class="nav-item-name">
                <div class="icon-box">
                  icon
                </div>
                <div class="name-box">
                  <h3 class="item-title">针对SP数据中心</h3>
                  <div class="item-stitle">提供资金及技术支持</div>
                </div>
              </div>
            </div>
          </div>
          <div class="button-box">
            <span class="nav-btn"><</span>
            <span class="nav-btn active">></span>
          </div>
        </div>
      </div>
      <!-- Industry support end -->

    </div>
</template>

<script>
  export default {
    name: 'BmsIndex'
  }
</script>

<style type="text/less" lang="less" scoped>
.page-content{
  width: 100%;
  min-width: 1380px;
}
.banner{
  background-image: url("../../assets/index/banner-bg.png");
  height: 742px;
  width: 100%;
  background-size: cover;
  .banner-center-box{
    position: relative;
    width: 1380px;
    margin: 0 auto;
    padding-top: 230px;
    color: #ffffff;
    .banner-img{
      position: absolute;
      right: 100px;
      top: 116px;
    }
    .banner-left-box{
      h2{
        font-size: 45px;
        color: #ffffff;
        margin-bottom: 50px;
        span{
          padding-bottom: 9px;
          border-bottom: 3px solid #26e6b3;
          border-radius: 1.5px;
        }
      }
      p{
        font-size: 17px;
        margin-bottom: 5px;
      }
      .banner-btn{
        display: inline-block;
        cursor: pointer;
        margin-top: 20px;
        color: #ffffff;
        font-size: 14px;
        padding: 8px 15px;
        border-radius: 5px;
        background:linear-gradient(0deg,rgba(19,195,140,1) 1%,rgba(51,255,204,1) 100%);
      }
    }
  }
}

.content-items-box{
  position: relative;
  width: 1380px;
  margin: 0 auto;
  padding: 110px 40px;
  .box-title{
    text-align: center;
    h2{
      font-size: 28px;
      color: #000;
      font-weight: 400;
    }
    .e-title{
      font-size: 12px;
      letter-spacing: 7px;
      color: #28DBB1;
    }
  }

  .items-detail-box{
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    position: relative;
    .area-round-box{
      position: absolute;
      top: 255px;
      left: 100px;
      width:132px;
      height:132px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #ffffff;
      background:linear-gradient(180deg,rgba(40,125,246,1) 0%,rgba(49,217,203,1) 100%);
      border-radius:50%;
      &.area2{
         top: 140px;
         right: 100px;
         left: auto;
       }
      &.area3{
         top: 450px;
         right: 140px;
         left: auto;
       }
    }
    .item-box{
      width: 353px;
      background-color: #F9FAFE;
      border-radius: 10px;
      padding: 60px 40px;
      cursor: pointer;
      &.active{
        background-color: #3677D3;
        color: #ffffff;
        .item-tit, .item-detail{
          color: #ffffff;
        }
       }
      .item-tit{
        font-size: 18px;
        color: #333333;
        margin-bottom: 25px;
      }
      .item-detail{
        font-size: 14px;
        color: #999999;
        width: 80%;
        line-height: 22px;
        margin-bottom: 45px;
      }
      .more-btn{
        color: #28DBB1;
        font-size: 14px;
      }
    }
  }
}

.my-product{
  width: 100%;
  background:linear-gradient(to bottom,#eef5ff 0%,#f4f9ff 50%,#fbfcff 85%,#ffffff 100%);
  padding: 110px 0;
  .product-center{
    margin: 0 auto;
    width: 1380px;
    .items-detail-box{
      padding-top: 130px;
      display: inline-block;
    }
    .product-items{
      display: flex;
      .items-left{
        width: 50%;
        padding-left: 20px;
        &.product-text{
          padding-top: 140px;
          padding-left: 140px;
        }
      }
      .items-right{
        width: 50%;
        &.product-text{
          padding-top: 140px;
          padding-left: 255px;
        }
      }
      &.pad-top{
        padding-top: 60px;
      }
      .product-title{
        color: #82B7FF;
        font-size: 26px;
      }
      .porduct-detail{
        width: 390px;
        margin-bottom: 20px;
      }
      .more-btn{
        display: inline-block;
        cursor: pointer;
        padding: 5px 20px;
        background:linear-gradient(0deg,rgba(25,202,151,1) 0%,rgba(55,237,205,1) 81%);
        border-radius:6px;
        font-size: 14px;
        color: #ffffff;
      }
      .s-title{
        font-size: 24px;
        color: #333333;
        padding-bottom: 30px;
        span{
          padding-bottom: 6px;
          border-bottom: 2px solid #FFB71A;
        }
      }
    }
  }
}

.global-distribution{
  .items-detail-box{
    .round-box{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 235px;
      height: 235px;
      border-radius: 50%;
      border:2px dashed rgba(102,102,102,1);
      &.medium{
       display: flex;
       align-items: center;
       justify-content: center;
        width: 420px;
        height: 420px;
        border-style: solid;
       }
      &.big{
        position: relative;
        margin: 0 auto;
        width: 590px;
        height: 590px;
        border-style: dotted;
        .roud-item-box{
          position: absolute;
          top: 39px;
          left: 121px;
          width: 309px;
          height: 100px;
          border-radius: 15px;
          background:linear-gradient(90deg,#277AF7 0%,#31DEC9 100%);
          font-size: 16px;
          color: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 30px;
          &.roud-item2{
             top: 176px;
             left: 235px;
           }
          &.roud-item3{
             top: 315px;
             left: 40px;
           }
          &.roud-item4{
             top: 450px;
             left: 155px;
           }
        }
       }
      .roud-small{
        position: absolute;
        top: 81px;
        left: 65px;
        width: 22px;
        height: 22px;
        background:linear-gradient(90deg,rgba(37,103,255,1) 0%,rgba(50,232,197,1) 100%);
        border-radius:50%;
        &.small2{
           top: 352px;
           left: -4px;
         }
        &.small3{
          top: 220px;
          right: -5px;
          left: auto;
        }
        &.small4{
           top: 485px;
           left: auto;
           right: 71px;
         }
      }

    }
  }
}

.industry-support{
  .items-detail-box{
    display: inline-block;
    width: 100%;
  }
  .nav-content{
    display: flex;
    width: 100%;
    overflow: hidden;
    .nav-item{
      display: flex;
      flex-wrap: wrap;
      width: 687px;
      height: 312px;
      background-color: #F9F9F9;
      padding: 70px 55px 20px 55px;
      .nav-item-detail{
        font-size: 14px;
        color: #999999;
      }
      .name-box{
        font-size: 14px;
        color: #333333;
        .item-title{
          font-size: 18px;
          font-weight: bold;
          color: #999999;
        }
      }
      .nav-item-name{
        display: flex;
        .icon-box{
          width: 80px;
        }
      }
    }
  }
  .button-box{
    text-align: center;
    .nav-btn{
      display: inline-block;
      padding: 0 15px;
      font-size: 30px;
      color: #DBDBDB;
      &.active{
        color: #31DCCA;
      }
    }
  }
}
@media (max-width: 1400px) {
  .banner{
    .banner-center-box{
      padding-left: 35px;
    }
  }
}

@media (max-width: 768px) {
  .content-items-box{
    width: 100%;
  }
  .banner .banner-center-box .banner-img{
    display: none;
  }
  .content-items-box .items-detail-box{
    flex-flow: column;
  }
  .content-items-box .items-detail-box .item-box{
    width: 100%;
    margin-bottom: 20px;
  }
}
</style>